<template>
  <div>
    <cus-Breadcrumb level1="个人中心" class="mb20"></cus-Breadcrumb>
    <el-card>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="头像" class="admin">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="昵称" class="admin">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="账号" class="admin">
          <el-input :disabled="true" v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" class="admin">
          <span>●●●●●●●●●●●●●●●●●●●</span>
          <el-button
            type="primary"
            round
            size="mini"
            class="fr mt5"
            v-if="!form.flag"
            @click.prevent="changeFlag"
          >修改密码</el-button>
          <el-button
            type="success"
            round
            size="mini"
            class="fr mt5"
            v-if="form.flag"
            @click.prevent="changeFlagFalse"
          >确认修改</el-button>
        </el-form-item>
        <div v-if="form.flag">
          <el-form-item label="原密码" class="admin">
            <el-input type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码" class="admin">
            <el-input placeholder="6-12位，包含大小写字母和数字" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" class="admin">
            <el-input placeholder="6-12位，包含大小写字母和数字" type="password"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imageUrl: '@/assets/images/logo.png',
      form: {
        flag: false,
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        account: 'admin'
      }
    }
  },
  created () {
    this.showLoading = true
    const token = sessionStorage.getItem('accessToken')
    if (!token) {
      this.$message.warning('请先登录')
      this.$router.push({ name: 'login' })
    }
    this.managerNickName = sessionStorage.getItem('managerNickName')
  },
  methods: {
    onSubmit () {},
    changeFlag () {
      this.form.flag = true
    },
    changeFlagFalse () {
      this.form.flag = false
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style>
/* 上传图片 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 48px;
  text-align: center;
}
.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
.admin {
  width: 400px;
}
.headPhoto {
  overflow: hidden;
  width: 50px;
  height: 50px;
  border: 1px dashed #ccc;
  border-radius: 50%;
  margin-bottom: 5px;
}
.updataAndChange {
  color: #606266;
}
.headImg {
  width: 50px;
  height: 50px;
}
.w50 {
  width: 50%;
}
</style>
